﻿@using Resource;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    @{ await Html.RenderPartialAsync("/Views/Shared/_LayoutScript.cshtml"); }
    @{ await Html.RenderPartialAsync("/Views/Shared/_StyleCss.cshtml"); }

    <script type="text/javascript" src="~/js/swiper-bundle.min.js?v=@DateTime.Now.Ticks"></script>
    <script type="text/javascript" src="~/js/fontscroll.js?v=@DateTime.Now.Ticks"></script>
    <link rel="stylesheet" type="text/css" href="~/css/swiper-bundle.min.css?v=@DateTime.Now.Ticks">
    <link href="/css/DeviceStatus.css?v=@DateTime.Now.Ticks" rel="stylesheet" />

    <title>DeviceStatus</title>
    <style type="text/css">
        body {
            color: #FFF;
            margin: 0 0;
            padding: 0 0;
            overflow: hidden;
        }

        .quer {
            right: 0.2rem;
            height: 0.5rem;
            padding-left: 0.2rem;
            line-height: 0.5rem;
            text-align: left;
            color: #FFF;
            /*background-color: #22284A;*/
            border: 1px dashed #656981;
        }

        .quer > spn {
            margin-right: 0.3rem;
            padding: 0.05rem;
            text-align: center;
            font-size: 0.14rem;
            border-radius: 5px;
        }

        .breakdown {
            background-color: #AC2925;
        }

        .inidle {
            background-color: #623683;
        }

        .debug {
            background-color: #D58512;
        }

        .await {
            background-color: #269ABC;
        }

        .normal {
            background-color: #398439;
        }

        .fordiv {
            padding-left: 0.1rem;
            height: 9.5rem;
        }

        .divfolt {
            /*../images/facility.png*/
            background: url(/images/facility.png) no-repeat center;
            background-position: top;
            background-size: 50%;
            background-repeat: no-repeat;
            float: left;
            margin: 0.05rem;
            border: 1px dashed #656981;
            width: 1.53rem;
            height: 1.65rem;
            position: relative;
            overflow: hidden;
        }

        .divfolt:hover {
            background-color: #073758;
        }

        .label {
            margin-top: -1px;
            margin-left: -1px;
            width: 0.3rem;
            height: 0.2rem;
            border: 1px solid #656981;
            text-align: center;
            font-size: 0.12rem;
            border-bottom-right-radius: 50px;
            border-top-right-radius: 50px;
        }

        p {
            font-size: 0.12rem;
            text-align: left;
            margin: 0.05rem;
        }

        .mesg {
            width: 1.52rem;
            padding: 0.02rem;
            position: absolute;
            bottom: 0;
        }

        .swiper-pagination-bullet {
            width: 0.2rem;
            height: 0.2rem;
            text-align: center;
            line-height: 0.2rem;
            font-size: 0.12rem;
            color: #000;
            opacity: 1;
            background: #FFF;
            /*background: rgba(0, 0, 0, 0.2);*/
        }

        .swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
        }

        .chart {
            padding: 0.2rem 0.2rem;
            border-top: none;
            width: 100%;
            height: 3rem;
        }

        .gun span {
            display: block;
            float: left;
            height: .2rem;
            width: 25%;
            /*background: red;*/
            /*margin: 15px 10px 10px 10px;*/
            /*padding: 20px;*/
            text-align: center;
            font-size: 0.14rem;
            font-weight: 600;
            color: #61d2f7;
            text-align: center;
            margin-bottom: .1rem;
        }

        #FontScroll {
            width: 100%;
            height: 2.3rem;
            overflow: hidden;
            /*float: left;*/
            margin-top: .1rem;
            /*margin: 0 5%;*/
            /*margin-left: 50px;*/
            /*background: gold;*/
        }

        #FontScroll ul li {
            height: .32rem;
            width: 100%;
            color: #ffffff;
            text-align: center;
            line-height: .32rem;
            /*border-bottom: 1px dashed #404040;*/
            /*width:33.3%;*/
            overflow: hidden;
            font-size: 0.14rem;
            /*border-bottom: 1px dashed #404040;*/
            /*width:33.3%;*/
            /*background: red;*/
            /*margin: 0 2%;*/
        }

        #FontScroll ul li:hover {
            box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
            10px 0px 15px #034c6a inset;
            cursor: pointer;
        }

        .fontInner span {
            display: inline-block;
            /*float: left;*/
            /*height: 20px;*/
            width: 25%;
            color: #f2eded;
            /*background: red;*/
        }

        .fontInner span b {
            display: inline-block;
            width: .2rem;
            height: .2rem;
            border-radius: 0.03rem;
            color: #ffffff;
            line-height: .2rem;
        }

        #FontScroll ul li:nth-child(1) .fontInner span b {
            background: #EB6841
        }

        #FontScroll ul li:nth-child(8n-4) .fontInner span b {
            background: #20a8fe
        }

        #FontScroll ul li:nth-child(8n-3) .fontInner span b {
            background: #EB6841
        }

        #FontScroll ul li:nth-child(8n-2) .fontInner span b {
            background: #3FB8AF
        }

        #FontScroll ul li:nth-child(8n-1) .fontInner span b {
            background: #FE4365
        }

        #FontScroll ul li:nth-child(8n-5) .fontInner span b {
            background: #FC9D9A
        }

        #FontScroll ul li:nth-child(8n-6) .fontInner span b {
            background: #EDC951
        }

        #FontScroll ul li:nth-child(8n-7) .fontInner span b {
            background: #C8C8A9
        }

        #FontScroll ul li:nth-child(8n) .fontInner span b {
            background: #83AF9B
        }

        #FontScroll ul li:first-child .fontInner span b {
            background: #036564
        }

        #FontScroll ul li:last-child .fontInner span b {
            background: #3299BB
        }
    </style>
</head>
<body class="fill-parent" style="overflow-y: hidden">
    <div class="main">
        <div class="header">
            <div class="header-left fl">
                <img src="/images/logo.png?v=@DateTime.Now.Ticks" class="scaled-image" draggable="false" oncontextmenu="return false;" ondragstart="return false;" />
            </div>
            <div class="btn">
                <spn>
                    <div id="query">
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Desktop</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard.exe?v={DateTime.Now.Ticks}") download>@Label.Local</a>
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard_lnk.zip?v={DateTime.Now.Ticks}") download>@Label.Shortcut</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Language</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.CNLANGUAGE')">@Label.Chinese</a>
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.USLANGUAGE')">@Label.English</a>
                            </div>
                        </div>
                        <button class="modalBtn dimension">@Label.Full</button>
                    </div>
                </spn>
            </div>
            <div class="header-center fl">
                <div class="header-title"></div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl" id="time"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <div class="title">@Label.Equipment@Label.List</div>
                    <div class="quer"></div>
                    <div class="fordiv">
                        <div class="swiper mySwiper" style="height:100%;">
                            <div class="swiper-wrapper" style="height:100%;">
                                <!-- 用来盛轮播图图片的盒子 -->
                                @*
                                <div class="divfolt" style="width:10.2%; height:17.5%;">
                                    <div class="label">1</div>
                                    <div class="mesg">
                                        <p><spn>SN：</spn><label>80-0031-00001</label></p>
                                        <p><spn>名称：</spn><label>TYUTT/NAME</label></p>
                                        <p><spn>状态：</spn><label class="status">正在运行</label></p>
                                    </div>
                                </div>
                                *@
                            </div>
                            @*
                            <!-- 轮播图的下一页按钮 -->
                            <!--<div class="swiper-button-next"></div>-->
                            <!-- 轮播图的上一页按钮 -->
                            <!--<div class="swiper-button-prev"></div>-->
                            <!-- 如果需要滚动条 -->
                            <!-- <div class="swiper-scrollbar"></div> -->
                            <!-- 轮播图的底下的导航小点点按钮 -->
                            *@
                            <div class="swiper-pagination" style="color:#FFF">1</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="title">@Label.Abnormal@Label.Status</div>
                    <div id="chart1" class="chart"></div>
                </div>
                <div class="right-cen rightTop border">
                    <div class="title">@Label.OEE</div>
                    <div id="chart2" class="chart"></div>
                </div>
                <div class="right-bottom rightTop border">
                    <div class="title">@Label.Abnormal@Label.Equipment</div>
                    <div id="chart3" class="chart">
                        <div class="echart wenzi">
                            <div class="gun">
                                <span>@Label.NoSort</span>
                                <span>@Label.Equipment@Label.SN</span>
                                <span>@Label.Equipment</span>
                                <span>@Label.Equipment@Label.Status</span>
                            </div>
                            <div id="FontScroll" class="myscroll">
                                <ul id="devicelist" style="margin-top: -8px;"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        //模板初始化配置
        $(document).ready(function () {
            var whei = $(window).width();
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });

            /*当前时间*/
            function numberToUpperCase(number) {
                var uppercaseMonths = [
                    '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'
                ];
                return uppercaseMonths[number - 1];
            }
            var myDate = new Date();
            var result = numberToUpperCase(myDate.getMonth() + 1);
            $('.header-title').html("@Html.Raw(Label.Board_EMSEquipmentStatus)");
            function getTime() {
                var myDate = new Date();
                var myYear = myDate.getFullYear(); //年
                var myMonth = myDate.getMonth() + 1; //月
                var myToday = myDate.getDate(); //日
                var myDay = myDate.getDay(); //星期
                var myHour = myDate.getHours(); //小时
                var myMinute = myDate.getMinutes(); //分钟
                var mySecond = myDate.getSeconds(); //秒数
                var week = ['@Label.Sunday', '@Label.Monday', '@Label.Tuesday', '@Label.Wednesday', '@Label.Thursday', '@Label.Friday', '@Label.Saturday'];
                var nowTime;

                nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
                $('#time').html(nowTime);
            };
            function fillZero(str) {
                var realNum;
                if (str < 10) {
                    realNum = '0' + str;
                } else {
                    realNum = str;
                }
                return realNum;
            }
            setInterval(getTime, 1000);

            // 设置全屏
            $('.dimension').on('click', function (e) {
                var element = document.documentElement;
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    // 判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.mozRequestFullScreen) {       //兼容火狐
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullscreen) {    //兼容谷歌
                        element.webkitRequestFullscreen();
                    } else if (element.msRequestFullscreen) {        //兼容IE
                        element.msRequestFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Exit+Label.Full)");
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Full)");
                }
            });
        });

        //初始化图表
        var memachinetype;
        var chartIds = ['Tab1', 'Tab2', 'Tab3'];
        //图表自适应大小
        function echartsautomatic() {
            var charts = [];
            chartIds.forEach(function (chartId) {
                var chart = echarts.init(document.getElementById(chartId));
                charts.push(chart);
            });
            window.onresize = function () {
                charts.forEach(function (chart) {
                    chart.resize();
                });
            };
        }

        //轮播
        $(document).ready(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });
        window.onload = function () {
            setTimeout(function () {
                TabInterval();
            }, 500);
        };
        //定时
        var Tabtimer;
        function TabInterval() {
            clearInterval(Tabtimer);
            getdta();
            //每隔5m执行一次
            Tabtimer = setInterval(function () {
                getdta();
                echartsautomatic();
            }, 10 * 60 * 1000);
        }
        $(window).on('resize', function () {
            echartsautomatic();
        });
        /*图表自适应*/
        var chartIds = ['chart1', 'chart2'];
        function echartsautomatic() {
            var charts = [];
            chartIds.forEach(function (chartId) {
                var chart = echarts.init(document.getElementById(chartId));
                charts.push(chart);
            });
            window.onresize = function () {
                charts.forEach(function (chart) {
                    chart.resize();
                });
            };
        }

        //获取数据
        var getdta = function () {
            $.ajax({
                type: "POST",
                url: "/Report/EquipmentData",
                dataType: "json",
                success: function (data) {
                    //设备title
                    title(data.groupdata);
                    //设备列表
                    carousel(data.list);
                    //设备状态
                    DeviceStatusChart(data.groupdata.filter(item => item.name != "正常运行"));
                    //设备效率OEE
                    DevicePointerChart(data.efficiency);
                    //设备异常轮播
                    Carousel(data.exception);
                    //echar 自适应
                    echartsautomatic();
                }
            });
        }
        //设备 title
        var title = function (groupdata) {
            $('.quer>spn').remove();
            var items = "";
            var value = 0;
            for (var i = 0; i < groupdata.length; i++) {
                value = value + groupdata[i].value;
                items = (items != "" ? items : "") + '<spn class="' + statustype(groupdata[i].name) + '">' + statusname + '：' + groupdata[i].value + '</spn>';
            }
            items = '<spn style="background-color: #5470c6;">@Html.Raw(Label.Equipment+Label.Qty)：' + value + '</spn>' + (items != "" ? items : "");
            $('.quer').append(items);
        };
        //设备状态样式
        var statusname;
        var statustype = function (statusid) {
            switch (statusid) {
                case "@Html.Raw(Label.Breakdown)":
                case "故障停机":
                case 1:
                    statusname = "@Html.Raw(Label.Breakdown)";
                    return "breakdown"
                    break;
                case "@Html.Raw(Label.Inidle)":
                case "闲置停用":
                case 2:
                    statusname = "@Html.Raw(Label.Inidle)";
                    return "inidle"
                    break;
                case "@Html.Raw(Label.Debug)":
                case "正在调试":
                case 3:
                    statusname = "@Html.Raw(Label.Debug)";
                    return "debug"
                    break;
                case "@Html.Raw(Label.Await)":
                case "等待生产":
                case 4:
                    statusname = "@Html.Raw(Label.Await)";
                    return "await"
                    break;
                case "@Html.Raw(Label.Normal)":
                case "正常运行":
                case 5:
                    statusname = "@Html.Raw(Label.Normal)";
                    return "normal"
                    break;
            }
        };
        //渲染设备列表
        var carousel = function (list) {
            $('.swiper-wrapper>div').remove();
            $('.swiper-pagination>spn').remove();
            var html, items;
            var length = list.length;
            var pagesize = Math.ceil(length / 45)
            for (var i = 1; i <= pagesize; i++) {
                var top = (i - 1) * 45;
                var pagesrow = (i * 45) < length ? (i * 45) : length;
                for (var r = top; r < pagesrow; r++) {
                    var style = "";
                    if (list[r].status_id == 1) { style = 'style="background-color:#AC2925;"'; };
                    if (list[r].status_id == 2) { style = 'style="background-color:#623683;"'; };
                    if (list[r].status_id == 3) { style = 'style="background-color:#D58512;"'; };
                    if (list[r].status_id == 4) { style = 'style="background-color:#269ABC;"'; };
                    if (list[r].status_id == 5) { style = 'style="background-color:#398439;"'; };
                    items = (r >= 1 ? items : '') + `<div class="divfolt" ${parseInt(list[r].status_id) !== 5 ? `onclick="DeviceReason('${list[r].sn}','${list[r].name}','${list[r].reason}')"` : ''}><div class="label">${(r + 1)}</div><div class="mesg" ${style}><p><spn>@Html.Raw(Label.SN)：</spn><label>${list[r].sn}</label></p><p><spn>@Html.Raw(Label.Name)：</spn><label>${list[r].name}</label></p><p><spn>@Html.Raw(Label.Status)：</spn><label class="status ${statustype(list[r].status_id)}">${statusname}</label></p></div ></div > `;

                }
                html = '<div class="swiper-slide">' + items + '</div>';
                $('.swiper-wrapper').append(html);
                items = "";
                html = "";
            };
            var swiper = new Swiper(".mySwiper", {
                //滚动方向 horizontal/vertical
                direction: 'horizontal',
                // 自动播放
                autoplay: true,
                // 循环播放
                loop: true,
                autoplay: {
                    delay: 5000
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '">' + (index + 1) + "</span>";
                    },
                },
            });
            //鼠标覆盖停止自动切换
            swiper.el.onmouseover = function () {
                swiper.autoplay.stop();
            };
            //鼠标离开开始自动切换
            swiper.el.onmouseout = function () {
                swiper.autoplay.start();
            };
        }
        //设备状态原因
        var DeviceReason = function (sn, name, reason) {
            alert("设备名:" + name + "\n" + "设备SN:" + sn + "\n" + "设备异常原因:" + reason + "\n");
        }
        //echar图表
        var DeviceStatusChart = function (data) {
            var StatusChart = echarts.init(document.getElementById('chart1'));
            var option = {
                legend: {
                    show: true,
                    width: '100%',
                    type: 'scroll',
                    data: data.map(item => item.name),
                    orient: 'horizontal',
                    itemWidth: 10,
                    itemHeight: 10,
                    scrollDataIndex: 0,
                    pageIconSize: [12, 12],
                    pageIconColor: 'white',
                    pageTextStyle: {
                        fontSize: '0.14rem',
                        color: 'white'
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '1%',
                    bottom: '5%',
                    width: '96%'
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '55%'],
                        radius: ['20%', '43%'],
                        color: (function () {
                            var colors = [];
                            var colorMap = {
                                '故障停机': '#AC2925',
                                '闲置停用': '#623683',
                                '正在调试': '#D58512',
                                '等待生产': '#269ABC',
                                '正常运行': '#398439'
                            };
                            data.forEach(function (item) {
                                colors.push(colorMap[item.name]);
                            });
                            return colors;
                        })(),
                        startAngle: 135,
                        labelLine: {
                            normal: {
                                length: 15
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{b|{b}:}  {per|{d}%} ',
                                backgroundColor: 'rgba(255, 147, 38, 0)',
                                borderColor: 'transparent',
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#999',
                                        fontSize: '0.16rem',
                                        lineHeight: 12,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#aaa',
                                        fontSize: '0.16rem',
                                        width: '100%',
                                        borderWidth: 1,
                                        height: 0
                                    },
                                    b: {
                                        color: '#b3e5ff',
                                        fontSize: '0.16rem',
                                        lineHeight: 33
                                    },
                                    c: {
                                        fontSize: '0.16rem',
                                        color: '#eee'
                                    },
                                    per: {
                                        color: '#FDF44E',
                                        fontSize: '0.16rem',
                                        padding: [5, 8],
                                        borderRadius: 2
                                    }
                                },
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '0.16rem'
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                formatter: '{b|{b}:}  {per|{d}%}  ',
                                backgroundColor: 'rgba(255, 147, 38, 0)',
                                borderColor: 'transparent',
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#999',
                                        fontSize: '0.14rem',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#aaa',
                                        fontSize: '0.14rem',
                                        width: '100%',
                                        borderWidth: 1,
                                        height: 0
                                    },
                                    b: {
                                        color: '#fff',
                                        fontSize: '0.14rem',
                                        lineHeight: 33
                                    },
                                    c: {
                                        fontSize: '0.14rem',
                                        color: '#eee'
                                    },
                                    per: {
                                        color: '#FDF44E',
                                        fontSize: '0.14rem',
                                        padding: [5, 6],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data: data
                    },
                    {
                        type: 'pie',
                        center: ['50%', '55%'],
                        radius: ['15%', '14%'],
                        label: {
                            show: false
                        },
                        data: [
                            {
                                value: 78,
                                name: '实例1',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: 'linear',
                                            global: false,
                                            colorStops: [
                                                { offset: 0, color: '#9F17FF' },
                                                { offset: 0.2, color: '#01A4F7' },
                                                { offset: 0.5, color: '#FE2C8A' },
                                                { offset: 0.8, color: '#FEE449' },
                                                { offset: 1, color: '#00FFA8' }
                                            ]
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            };

            StatusChart.setOption(option);
            StatusChart.currentIndex = -1;

            setInterval(function () {
                var dataLen = option.series[0].data.length;
                StatusChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: StatusChart.currentIndex
                });
                StatusChart.currentIndex = (StatusChart.currentIndex + 1) % dataLen;
                StatusChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: StatusChart.currentIndex
                });
            }, 1000);
        }
        var DevicePointerChart = function (data) {
            var chartDom = document.getElementById('chart2');
            var pointerChart = echarts.init(chartDom);
            var pointeroption = {
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '1%',
                    bottom: '5%',
                    width: '96%',
                },
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [
                                    [0.3, '#FD666D'],
                                    [0.7, '#67E0E3'],
                                    [1, '#37A2DA']
                                ]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -10,
                            length: 8,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: -10,
                            length: 15,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        axisLabel: {
                            color: 'inherit',
                            distance: 15,
                            textStyle: {
                                color: 'white',
                                fontSize: '0.12rem'
                            }
                        },
                        detail: {
                            textStyle: {
                                color: 'white',
                                fontSize: '0.16rem'
                            },
                            valueAnimation: true,
                            formatter: '{value}%',
                            color: 'inherit'
                        },
                        data: [{ value: data }]
                    }
                ]
            };
            //setInterval(function () {pointerChart.setOption({series: [{data: [{value: +(Math.random() * 100).toFixed(2)}]}]});}, 2000);
            pointerChart.setOption(pointeroption);
        }
        //设备异常轮播
        var Carousel = function (data) {
            var Items = data;
            var liinnerHTML = "";
            $("#devicelist").empty();
            $.each(Items, function (i, item) {
                liinnerHTML += `<li><div class="fontInner clearfix"><span><b>${i+1}</b></span><span>${item.sn}</span><span>${item.name}</span><span>${item.status_name}</span></div></li>`;
            });
            $("#devicelist").html(liinnerHTML);
        }
    </script>
</body>
</html>
